<template>
  <div class="table-container">
    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="getHeaderCellStyle"
      :cell-style="getRowCellStyle"
    >
      <el-table-column prop="CreatedAt" label="时间" width="105" />
      <el-table-column prop="machine_name" label="客户" width="100" />
      <el-table-column prop="warn_msg" label="报警内容" />
    </el-table>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { ElTable, ElTableColumn } from 'element-plus';

const props = defineProps({
  data: {
    type: Array,
    required: true,
  },
});
const tableData = ref([]);

watch(
  () => props.data,
  (newVal) => {
    if (Array.isArray(newVal)) {
      const formattedData = newVal.map((item) => ({
        CreatedAt: new Date(item.CreatedAt).toLocaleString(),
        machine_name: item.machine_name,
        warn_msg: item.warn_msg,
      }));
      tableData.value = formattedData;
    } else {
      console.error('传递给子组件的数据不是数组:', newVal);
    }
  },
  { deep: true }
);

function getHeaderCellStyle() {
  return {
    background: '#6495ED',
    color: '#fff',
    'text-align': 'left',
    border: 'none',
  };
}

function getRowCellStyle({ row, rowIndex }) {
  return {
    background: rowIndex % 2 === 0 ? '#f5f5f7' : '#ffffez',
    color: '#1d1d1f',
  };
}
</script>

<style scoped>
.table-container {
  max-height: 250px; /* 设置最大高度 */
  overflow-x: auto;
  overflow-y: auto; /* 添加垂直滚动 */
}

.el-table th,
.el-table td {
  padding: 4px; /* 调整内边距 */
  font-size: 14px; /* 调整字体大小 */
}


/* 媒体查询，针对不同屏幕尺寸调整样式 */
@media (max-width: 480px) {
  .el-table th,
  .el-table td {
    padding: 2px;
    font-size: 12px;
  }
}
</style>